<template>
  <div class="project-config-page">
    <el-card>
      <template #header>
        <div class="card-header">
          <div class="flex items-center">
            <h3 class="m-0">项目配置</h3>
            <el-tag class="ml-4" :type="getStatusTag(project?.status || ProjectStatus.INACTIVE)" effect="light">
              {{ getProjectStatusText(project?.status) }}
            </el-tag>
          </div>
          <div>
            <el-button type="primary" @click="handleAddConfig">添加配置</el-button>
            <el-button type="primary" @click="handleBatchAddConfig">批量添加</el-button>
            <el-button type="primary" @click="showFilePathDialog">配置管理</el-button>
            <el-button @click="goBack">返回</el-button>
          </div>
        </div>
      </template>

      <div class="project-info mb-4">
        <div class="flex items-center gap-4">
          <div>
            <span class="label">项目名称：</span>
            <span class="value">{{ project?.name || '加载中...' }}</span>
          </div>
          <div>
            <span class="label">项目类型：</span>
            <span class="value">{{ project?.type === ProjectType.FRONTEND ? '前端项目' : '后端项目' }}</span>
          </div>
          <div>
            <span class="label">创建时间：</span>
            <span class="value">{{ project?.created_at || '-' }}</span>
          </div>
        </div>
      </div>

      <div v-if="loading" class="loading-container">
        <el-skeleton :rows="5" animated />
      </div>
      <!-- 无配置文件时的提示 -->
      <div v-else-if="filePaths.length === 0" class="empty-config-container">
        <el-empty description="暂无配置文件">
          <template #description>
            <div class="text-center">
              <p class="mb-2">该项目还没有配置文件</p>
              <p class="text-sm text-gray-500 mb-4">您需要先创建配置文件，然后再添加配置项</p>
            </div>
          </template>
          <el-button type="primary" @click="showFilePathDialog">创建配置文件</el-button>
        </el-empty>
      </div>
      <div v-else class="config-table-container">
        <!-- 文件路径选择器 -->
        <div class="file-path-selector mb-4">
          <div class="path-header flex justify-between items-center mb-2">
            <div class="label">文件路径:</div>
          </div>
          <div class="path-tags">
            <el-radio-group v-model="selectedFilePath" @change="handleFilePathChange">
              <el-radio-button label="all">全部</el-radio-button>
              <el-radio-button 
                v-for="path in filePaths" 
                :key="path" 
                :label="path"
              >
                {{ path || '未指定' }}
              </el-radio-button>
            </el-radio-group>
          </div>
        </div>
        
        <!-- 有配置文件但无配置项时显示的提示 -->
        <div v-if="filteredConfigList.length === 0" class="empty-items-container">
          <el-empty description="暂无配置项">
            <template #description>
              <div class="text-center">
                <p class="mb-2">当前配置文件下没有配置项</p>
                <p class="text-sm text-gray-500 mb-4">请点击右上角的“添加配置”按钮创建新的配置项</p>
              </div>
            </template>
          </el-empty>
        </div>
        
        <!-- 当有配置项时显示表格 -->
        <template v-else>
          <el-table :data="filteredConfigList" border stripe style="width: 100%" row-class-name="config-table-row">
            <el-table-column prop="key" label="配置项" min-width="120" show-overflow-tooltip />
            <el-table-column prop="value" label="值" min-width="150" show-overflow-tooltip />
            <el-table-column prop="description" label="说明" min-width="180" show-overflow-tooltip />
            <el-table-column label="操作" width="150" fixed="right">
              <template #default="{ row }">
                <el-button type="primary" link @click="handleEditConfig(row)">编辑</el-button>
                <el-button type="danger" link @click="handleDeleteConfig(row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <div class="mt-2 px-2 text-gray-500 text-sm">
            共 {{ filteredConfigList.length }} 项配置
          </div>
        </template>
      </div>
    </el-card>

    <!-- 编辑配置对话框 -->
    <el-dialog v-model="configDialogVisible" :title="dialogTitle" width="500px">
      <el-form :model="configForm" label-width="100px" ref="configFormRef">
        <el-form-item label="配置项" prop="key" required>
          <el-input v-model="configForm.key" placeholder="请输入配置项键名" />
        </el-form-item>
        <el-form-item label="配置值" prop="value" required>
          <el-input v-model="configForm.value" placeholder="请输入配置项值" />
        </el-form-item>
        <el-form-item label="说明" prop="description">
          <el-input v-model="configForm.description" placeholder="请输入配置项说明" />
        </el-form-item>
        <el-form-item label="文件路径" prop="file_path">
          <el-select v-model="configForm.file_path" placeholder="请选择文件路径" style="width: 100%">
            <el-option 
              v-for="path in filePaths" 
              :key="path" 
              :label="path || '未指定'" 
              :value="path" 
            />
          </el-select>
          <div class="mt-2">
            <el-link type="primary" @click="showFilePathDialog">管理文件路径</el-link>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="configDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveConfig">保存</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 删除确认对话框 -->
    <el-dialog v-model="deleteConfirmVisible" title="确认删除" width="400px">
      <p>确定要删除配置项 <strong>{{ currentConfig?.key }}</strong> 吗？</p>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="deleteConfirmVisible = false">取消</el-button>
          <el-button type="danger" @click="confirmDelete">确认删除</el-button>
        </span>
      </template>
    </el-dialog>
    
    <!-- 文件路径管理对话框 -->
    <el-dialog 
      v-model="filePathDialogVisible" 
      title="文件路径管理" 
      width="500px"
      @close="handleFilePathDialogClose"
    >
      <!-- 文件路径列表加载状态 -->
      <div v-if="filePathLoading" class="loading-container py-4 text-center">
        <el-skeleton :rows="3" animated />
        <p class="mt-2 text-gray-500">正在加载文件路径...</p>
      </div>
      
      <!-- 文件路径列表内容 -->
      <div v-else class="file-paths-list mb-4">
        <div v-if="filePaths.length > 0" class="current-paths mb-4">
          <h4 class="text-gray-700 mb-2">当前文件路径</h4>
          <el-tag 
            v-for="path in filePaths" 
            :key="path" 
            class="mr-2 mb-2 file-path-tag" 
            size="large"
            effect="plain"
            closable
            @close="handleRemoveFilePath(path)"
          >
            {{ path || '未指定' }}
          </el-tag>
        </div>
        <div v-else class="empty-paths mb-4">
          <p class="text-gray-500">暂无文件路径，请添加新的文件路径</p>
        </div>
      </div>
      
      <div class="add-path-form">
        <h4 class="text-gray-700 mb-2">添加新文件路径</h4>
        <div class="flex">
          <el-input v-model="newFilePath" placeholder="请输入文件路径" class="mr-2" />
          <el-button type="primary" @click="addFilePath">添加</el-button>
        </div>
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="filePathDialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
    
    <!-- 文件路径删除确认对话框 -->
    <el-dialog v-model="filePathDeleteConfirmVisible" title="确认删除" width="400px">
      <p>确定要删除配置文件 <strong>{{ currentFilePath }}</strong> 吗？</p>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="filePathDeleteConfirmVisible = false">取消</el-button>
          <el-button type="danger" @click="confirmRemoveFilePath">确认删除</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 批量添加配置对话框 -->
    <el-dialog 
      v-model="batchDialogVisible" 
      title="批量添加配置" 
      width="600px"
    >
      <el-form :model="{ batchFilePath, batchImportMode, batchConfigText }" label-width="100px">
        <!-- 选择目标配置文件 -->
        <el-form-item label="配置文件" required>
          <el-select v-model="batchFilePath" placeholder="请选择配置文件" style="width: 100%">
            <el-option 
              v-for="path in filePaths" 
              :key="path" 
              :label="path || '未指定'" 
              :value="path" 
            />
          </el-select>
          <div class="mt-2" v-if="filePaths.length === 0">
            <el-alert type="warning" show-icon>
              请先在右上角点击"配置管理"创建配置文件
            </el-alert>
          </div>
        </el-form-item>
        
        <!-- 导入方式选择 -->
        <el-form-item label="导入方式">
          <el-radio-group v-model="batchImportMode">
            <el-radio label="text">文本输入</el-radio>
            <el-radio label="file">文件上传</el-radio>
          </el-radio-group>
        </el-form-item>
        
        <!-- 文本输入模式 -->
        <el-form-item v-if="batchImportMode === 'text'" label="配置内容">
          <el-input 
            v-model="batchConfigText" 
            type="textarea" 
            :rows="10" 
            placeholder="请输入配置项，每行一条，格式为 key=value 或 key:value
例如：
database.url=jdbc:mysql://localhost:3306/db
api.timeout=30000
app.name=测试应用">
          </el-input>
          <div class="mt-2 text-sm text-gray-500">
            支持格式：key=value 或 key:value，每行一条
          </div>
        </el-form-item>
        
        <!-- 文件上传模式 -->
        <el-form-item v-else label="上传文件">
          <div class="flex items-center">
            <el-button type="primary" @click="fileInputRef?.click()">选择文件</el-button>
            <span v-if="batchFile" class="ml-2">{{ batchFile.name }}</span>
            <span v-else class="ml-2 text-gray-400">未选择文件</span>
          </div>
          <input 
            type="file" 
            ref="fileInputRef" 
            class="hidden" 
            style="display: none;" 
            @change="handleFileSelected"
            accept=".txt,.json,.properties,.env,.yml,.yaml"
          />
          <div class="mt-2 text-sm text-gray-500">
            支持格式：.txt、.json、.properties、.env、.yml、.yaml<br/>
            支持 JSON 格式（对象或数组）或 key=value 格式的文本文件
          </div>
        </el-form-item>
      </el-form>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="batchDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleBatchImport" :disabled="!batchFilePath || (batchImportMode === 'text' && !batchConfigText) || (batchImportMode === 'file' && !batchFile)">导入</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useThrottle } from '../../composables/useThrottle'

import { 
  getProjectDetail, 
  getProjectConfigs, 
  createProjectConfigV2, 
  updateProjectConfigV2, 
  deleteProjectConfigById,
  createProjectConfigFile,
  getProjectConfigFiles,
  deleteProjectConfigFile,
  deleteProjectConfig,
  saveProjectConfig
} from '../../request/project-api'

import { 
  ProjectType, 
  ProjectStatus, 
  type Project, 
  type ProjectConfig 
} from '@/model/project-model'

defineOptions({
  name: 'ProjectConfig'
})

const route = useRoute()
const router = useRouter()
const loading = ref(false)
const projectId = ref<number>(parseInt(route.params.id as string))
const project = ref<Project | null>(null)
const configList = ref<ProjectConfig[]>([])
const configDialogVisible = ref(false)
const deleteConfirmVisible = ref(false)
const currentConfig = ref<ProjectConfig | null>(null)

// 文件路径删除确认对话框
const filePathDeleteConfirmVisible = ref(false)
const currentFilePath = ref<string>('')

const dialogTitle = ref('添加配置')
const configForm = reactive<ProjectConfig>({
  key: '',
  value: '',
  description: '',
  file_path: ''
})
const configFormRef = ref()

// 文件路径筛选相关变量
const filePaths = ref<string[]>([])
// 存储配置文件对象列表（包含id和file_path等信息）
const configFiles = ref<any[]>([])
const selectedFilePath = ref('all')
const filteredConfigList = ref<ProjectConfig[]>([])

// 文件路径管理相关变量
const filePathDialogVisible = ref(false)
const newFilePath = ref('')

// 加载项目详情
const loadProjectDetail = async () => {
  if (!projectId.value) {
    ElMessage.error('项目ID无效')
    return
  }
  
  loading.value = true
  try {
    // 获取项目详情
    const detailRes = await getProjectDetail(projectId.value)
    if (detailRes.code === 0 && detailRes.data) {
      project.value = detailRes.data
    } else {
      ElMessage.error(detailRes.errorMsg || '获取项目详情失败')
      // 如果获取项目详情失败，使用模拟数据
      project.value = {
        id: projectId.value,
        name: `项目${projectId.value}`,
        type: ProjectType.FRONTEND,
        status: ProjectStatus.ACTIVE,
        created_at: new Date().toISOString(),
        updated_at: new Date().toISOString(),
        description: '模拟项目数据'
      }
    }
    
    // 获取项目配置文件列表
    try {
      // 确保projectId是有效的整数
      const projectIdInt = Number(projectId.value)
      if (isNaN(projectIdInt)) {
        throw new Error('项目ID不是有效的整数')
      }
      const configFilesRes = await getProjectConfigFiles(projectIdInt)
      if (configFilesRes.code === 0 && configFilesRes.data) {
        console.log('配置文件列表：', configFilesRes.data)
        // 存储原始的配置文件对象列表（包含id和file_path）
        configFiles.value = configFilesRes.data
        // 从配置文件列表中提取文件路径
        filePaths.value = configFilesRes.data.map(file => file.file_path)
        
        // 如果有配置文件，自动选中第一个文件
        if (filePaths.value.length > 0) {
          selectedFilePath.value = filePaths.value[0]
        }
      } else {
        console.warn('获取配置文件列表失败', configFilesRes.errorMsg)
        // 即使获取配置文件失败，仍然继续获取配置项
      }
    } catch (fileError) {
      console.error('获取配置文件列表错误', fileError)
      // 配置文件获取失败，继续获取配置项
    }
    
    // 获取项目配置列表
    try {
      const configRes = await getProjectConfigs(projectId.value)
      if (configRes.code === 0 && configRes.data) {
        configList.value = configRes.data
        
        // 如果前面没有获取到文件路径，则从配置项中提取
        if (filePaths.value.length === 0) {
          extractFilePaths()
        }
        
        // 初始化筛选后的列表，根据当前选中的文件路径筛选配置项
        handleFilePathChange(selectedFilePath.value)
      } else {
        throw new Error('获取配置列表失败')
      }
    } catch (configError) {
      console.warn('获取配置列表失败，使用模拟数据', configError)
      // 如果API请求失败，使用模拟数据
      configList.value = [
        {
          id: 1,
          project_id: projectId.value,
          key: 'API_URL',
          value: 'https://api.example.com',
          description: 'API服务器地址',
          file_path: '.env'
        },
        {
          id: 2,
          project_id: projectId.value,
          key: 'DEBUG',
          value: 'false',
          description: '是否开启调试模式',
          file_path: '.env.production'
        },
        {
          id: 3,
          project_id: projectId.value,
          key: 'LOG_LEVEL',
          value: 'info',
          description: '日志级别',
          file_path: '.env'
        }
      ]
      
      // 提取文件路径并初始化筛选
      extractFilePaths()
      handleFilePathChange()
    }
  } catch (error) {
    console.error('Failed to load project data:', error)
    ElMessage.error('加载项目数据失败')
    // 使用模拟项目数据
    project.value = {
      id: projectId.value,
      name: `项目${projectId.value}`,
      type: ProjectType.FRONTEND,
      status: ProjectStatus.ACTIVE,
      created_at: new Date().toISOString(),
      updated_at: new Date().toISOString(),
      description: '模拟项目数据'
    }
    // 使用模拟配置数据
    configList.value = [
      {
        id: 1,
        project_id: projectId.value,
        key: 'API_URL',
        value: 'https://api.example.com',
        description: 'API服务器地址',
        file_path: '.env'
      },
      {
        id: 2,
        project_id: projectId.value,
        key: 'DEBUG',
        value: 'false',
        description: '是否开启调试模式',
        file_path: '.env.production'
      }
    ]
    
    // 提取文件路径并初始化筛选
    extractFilePaths()
    handleFilePathChange()
  } finally {
    loading.value = false
  }
}

// 处理文件路径格式，去除config/前缀
const formatFilePath = (path?: string | null): string => {
  if (!path) return ''
  
  // 去除config/前缀
  if (path.startsWith('config/')) {
    return path.substring(7)
  }
  
  return path
}

// 提取所有不重复的文件路径
const extractFilePaths = () => {
  // 使用Set去重
  const uniquePaths = new Set<string>()
  
  configList.value.forEach(config => {
    // 格式化路径并去除config/前缀
    const formattedPath = formatFilePath(config.file_path)
    uniquePaths.add(formattedPath)
    
    // 同时更新配置项中的路径格式
    if (config.file_path !== undefined) {
      config.file_path = formattedPath
    }
  })
  
  // 转换成数组并按字母排序
  filePaths.value = Array.from(uniquePaths).sort()
}

// 处理文件路径选择变化
const handleFilePathChange = (path?: string | number | boolean) => {
  // 如果没有传入路径，使用当前选中的路径
  const currentPath = path !== undefined ? String(path) : selectedFilePath.value
  
  // 如果选择“全部”，显示所有配置
  if (currentPath === 'all') {
    filteredConfigList.value = [...configList.value]
    return
  }
  
  // 根据选定路径过滤配置项
  filteredConfigList.value = configList.value.filter(config => {
    // 处理空路径的情况
    if (currentPath === '') {
      return config.file_path === '' || config.file_path === null || config.file_path === undefined
    }
    return config.file_path === currentPath
  })
}

// 获取状态标签类型
const getStatusTag = (status: ProjectStatus): 'primary' | 'success' | 'warning' | 'info' | 'danger' => {
  switch (status) {
    case ProjectStatus.ACTIVE:
      return 'success'
    case ProjectStatus.DEVELOPMENT:
      return 'info'
    case ProjectStatus.DEPRECATED:
      return 'danger'
    case ProjectStatus.INACTIVE:
      return 'warning'
    default:
      return 'info'
  }
}

// 获取项目状态中文描述
const getProjectStatusText = (status?: ProjectStatus): string => {
  if (!status) return '未知状态'
  
  switch (status) {
    case ProjectStatus.ACTIVE:
      return '活跃'
    case ProjectStatus.DEVELOPMENT:
      return '开发中'
    case ProjectStatus.DEPRECATED:
      return '已废弃'
    case ProjectStatus.INACTIVE:
      return '非活跃'
    default:
      return '未知状态'
  }
}

// 批量添加配置相关状态
const batchDialogVisible = ref(false)
const batchConfigText = ref('')
const batchFilePath = ref('')
const batchImportMode = ref('text') // 'text' 或 'file'
const batchFile = ref<File | null>(null)
const fileInputRef = ref<HTMLInputElement | null>(null)

// 处理添加配置
const handleAddConfig = () => {
  openConfigDialog('add')
}

// 处理批量添加配置
const handleBatchAddConfig = () => {
  // 重置数据
  batchConfigText.value = ''
  batchFilePath.value = filePaths.value.length > 0 ? filePaths.value[0] : ''
  batchImportMode.value = 'text'
  batchFile.value = null
  
  // 显示对话框
  batchDialogVisible.value = true
}

// 处理文件选择
const handleFileSelected = (event: Event) => {
  const target = event.target as HTMLInputElement
  if (target.files && target.files.length > 0) {
    batchFile.value = target.files[0]
  }
}

// 处理批量配置导入
const handleBatchImport = async () => {
  if (!projectId.value) {
    ElMessage.error('项目ID无效')
    return
  }
  
  if (!batchFilePath.value) {
    ElMessage.warning('请选择配置文件路径')
    return
  }
  
  // 处理不同的导入模式
  try {
    loading.value = true
    
    if (batchImportMode.value === 'text') {
      // 文本解析模式
      if (!batchConfigText.value.trim()) {
        ElMessage.warning('请输入配置项内容')
        loading.value = false
        return
      }
      
      // 分析文本行，格式为 key=value 或 key:value
      const configs: ProjectConfig[] = []
      const lines = batchConfigText.value.split('\n').filter(line => line.trim())
      
      for (const line of lines) {
        let key = ''
        let value = ''
        
        // 支持 key=value 和 key:value 格式
        if (line.includes('=')) {
          [key, value] = line.split('=', 2)
        } else if (line.includes(':')) {
          [key, value] = line.split(':', 2)
        } else {
          continue // 跳过不符合格式的行
        }
        
        key = key.trim()
        value = value.trim()
        
        if (key) {
          configs.push({ key, value, description: '', file_path: batchFilePath.value })
        }
      }
      
      if (configs.length === 0) {
        ElMessage.warning('未解析到有效的配置项，请检查格式')
        loading.value = false
        return
      }
      
      // 批量添加配置项
      await batchSaveConfigs(configs)
      
    } else if (batchImportMode.value === 'file') {
      // 文件上传模式
      if (!batchFile.value) {
        ElMessage.warning('请选择配置文件')
        loading.value = false
        return
      }
      
      // 读取文件内容
      const reader = new FileReader()
      
      reader.onload = async (e) => {
        try {
          const content = e.target?.result as string
          if (!content) {
            ElMessage.error('文件读取失败')
            loading.value = false
            return
          }
          
          // 尝试作为JSON解析
          try {
            const jsonData = JSON.parse(content)
            const configs: ProjectConfig[] = []
            
            // 支持数组格式和对象格式
            if (Array.isArray(jsonData)) {
              // 数组格式 [{key, value, description}, ...]
              for (const item of jsonData) {
                if (item && typeof item === 'object' && 'key' in item) {
                  configs.push({
                    key: String(item.key),
                    value: item.value !== undefined ? String(item.value) : '',
                    description: item.description || '',
                    file_path: batchFilePath.value
                  })
                }
              }
            } else if (typeof jsonData === 'object') {
              // 对象格式 {key1: value1, key2: value2, ...}
              for (const [key, value] of Object.entries(jsonData)) {
                configs.push({
                  key: String(key),
                  value: value !== undefined ? String(value) : '',
                  description: '',
                  file_path: batchFilePath.value
                })
              }
            }
            
            if (configs.length > 0) {
              await batchSaveConfigs(configs)
              return
            }
          } catch (jsonError) {
            // JSON解析失败，尝试作为文本解析
            console.log('Not a valid JSON, trying as text', jsonError)
          }
          
          // 作为普通文本解析 (key=value 或 key:value)
          const configs: ProjectConfig[] = []
          const lines = content.split('\n').filter(line => line.trim())
          
          for (const line of lines) {
            let key = ''
            let value = ''
            
            if (line.includes('=')) {
              [key, value] = line.split('=', 2)
            } else if (line.includes(':')) {
              [key, value] = line.split(':', 2)
            } else {
              continue
            }
            
            key = key.trim()
            value = value.trim()
            
            if (key) {
              configs.push({ key, value, description: '', file_path: batchFilePath.value })
            }
          }
          
          if (configs.length > 0) {
            await batchSaveConfigs(configs)
          } else {
            ElMessage.warning('文件格式不支持或无有效配置项')
          }
        } catch (error) {
          console.error('处理文件失败:', error)
          ElMessage.error('处理文件失败')
        } finally {
          loading.value = false
        }
      }
      
      reader.onerror = () => {
        ElMessage.error('读取文件失败')
        loading.value = false
      }
      
      // 开始读取文件
      reader.readAsText(batchFile.value)
      return // 异步处理，返回
    }
  } catch (error) {
    console.error('批量导入失败:', error)
    ElMessage.error('批量导入配置失败')
    loading.value = false
  }
}

// 批量保存配置项
const batchSaveConfigs = async (configs: ProjectConfig[]) => {
  if (configs.length === 0) return
  
  try {
    const projectIdValue = Number(projectId.value)
    
    // 获取项目名称作为 module_name
    let moduleName = project.value?.name || ''
    
    // 并行保存所有配置项
    const savePromises = configs.map(config => {
      return saveProjectConfig(
        projectIdValue, 
        moduleName, 
        batchFilePath.value, 
        config.key, 
        {
          value: config.value,
          description: config.description
        },
        false // 批量添加时始终是新增操作
      )
    })
    
    // 等待所有保存操作完成
    const results = await Promise.allSettled(savePromises)
    
    // 统计结果
    let successCount = results.filter(r => r.status === 'fulfilled').length
    let failCount = results.filter(r => r.status === 'rejected').length
    
    // 刷新配置项列表
    await loadProjectDetail()
    
    // 关闭对话框
    batchDialogVisible.value = false
    
    if (successCount > 0) {
      if (failCount > 0) {
        ElMessage.warning(`成功导入${successCount}项配置，${failCount}项失败`)
      } else {
        ElMessage.success(`成功导入${successCount}项配置`)
      }
    } else {
      ElMessage.error('配置导入失败')
    }
  } catch (error) {
    console.error('批量保存失败:', error)
    ElMessage.error('配置导入失败')
  } finally {
    loading.value = false
  }
}

// 处理编辑配置
const handleEditConfig = (row: ProjectConfig) => {
  openConfigDialog('edit', row)
}

// 处理删除配置
const handleDeleteConfig = (config: ProjectConfig) => {
  currentConfig.value = config
  deleteConfirmVisible.value = true
}

// 管理配置文件对话框加载状态
const filePathLoading = ref(false)

// 显示文件路径管理对话框
const showFilePathDialog = async () => {
  // 先显示对话框，避免闪烁
  filePathDialogVisible.value = true
  newFilePath.value = ''
  
  // 在对话框内部显示加载状态，避免整个页面闪烁
  filePathLoading.value = true
  
  try {
    const projectIdInt = Number(projectId.value)
    if (!isNaN(projectIdInt)) {
      // 重新从服务器获取配置文件列表
      const configFilesRes = await getProjectConfigFiles(projectIdInt)
      if (configFilesRes.code === 0 && configFilesRes.data) {
        // 更新文件路径列表
        configFiles.value = configFilesRes.data
        filePaths.value = configFilesRes.data.map(file => file.file_path)
        console.log('刷新的文件路径列表:', filePaths.value)
      }
    }
  } catch (error) {
    console.error('刷新文件路径列表失败:', error)
  } finally {
    filePathLoading.value = false
  }
}

// 处理文件路径对话框关闭
const handleFilePathDialogClose = () => {
  newFilePath.value = ''
}

// 处理删除文件路径
const handleRemoveFilePath = async (path: string) => {
  try {
    // 确认用户是否有配置项使用该路径
    const usedConfigs = configList.value.filter(config => config.file_path === path)
    
    if (usedConfigs.length > 0) {
      // 如果有配置使用该路径，提示用户
      ElMessage.warning(`该路径下有${usedConfigs.length}个配置项，请先删除或修改这些配置项`)
      return
    }
    
    // 查找对应的配置文件对象，获取ID
    const configFile = configFiles.value.find(file => file.file_path === path)
    
    if (!configFile || !configFile.id) {
      // 更友好的提示，引导用户创建配置文件
      ElMessage.info('请先创建配置文件')
      showFilePathDialog()
      return
    }
    
    // 设置当前将要删除的文件路径，然后显示确认对话框
    currentFilePath.value = path
    filePathDeleteConfirmVisible.value = true
  } catch (error) {
    console.error('Failed to prepare file path removal:', error)
    ElMessage.error('准备删除文件路径时出错')
  }
}

// 确认删除文件路径
const confirmRemoveFilePath = async () => {
  try {
    // 显示加载状态
    loading.value = true
    
    // 获取当前路径对应的配置文件对象
    const path = currentFilePath.value
    const configFile = configFiles.value.find(file => file.file_path === path)
    
    if (!configFile || !configFile.id) {
      throw new Error('无法找到对应的配置文件')
    }
    
    // 调用API删除配置文件
    const projectIdInt = Number(projectId.value)
    if (isNaN(projectIdInt)) {
      throw new Error('项目ID不是有效的整数')
    }
    
    console.log(`删除配置文件：项目ID=${projectIdInt}，文件ID=${configFile.id}`)
    const deleteRes = await deleteProjectConfigFile(projectIdInt, configFile.id)
    
    if (deleteRes.code === 0 && deleteRes.data && deleteRes.data.success) {
      // 删除成功，更新前端数据
      const index = filePaths.value.findIndex(item => item === path)
      if (index !== -1) {
        filePaths.value.splice(index, 1)
      }
      
      // 同时从配置文件列表中删除
      const fileIndex = configFiles.value.findIndex(file => file.id === configFile.id)
      if (fileIndex !== -1) {
        configFiles.value.splice(fileIndex, 1)
      }
      
      ElMessage.success('配置文件已成功删除')
      
      // 如果当前选中的就是被删除的路径，重置为全部
      if (selectedFilePath.value === path) {
        selectedFilePath.value = 'all'
        handleFilePathChange()
      }
    } else {
      ElMessage.error(deleteRes.errorMsg || '删除配置文件失败')
    }
  } catch (error) {
    console.error('Failed to remove file path:', error)
    ElMessage.error('删除文件路径失败')
  } finally {
    loading.value = false
    // 无论成功与否，都关闭确认对话框
    filePathDeleteConfirmVisible.value = false
  }
}

// 添加新文件路径
const addFilePath = async () => {
  if (!newFilePath.value.trim()) {
    ElMessage.warning('请输入有效的文件路径')
    return
  }
  
  // 处理路径格式，去除可能存在的config/前缀
  let path = newFilePath.value.trim()
  if (path.startsWith('config/')) {
    path = path.substring(7) // 删除'config/'前缀
  }
  
  // 检查路径是否已存在
  if (filePaths.value.includes(path)) {
    ElMessage.warning('该文件路径已存在')
    return
  }

  // 显示加载状态
  loading.value = true
  
  try {
    // 调用API将配置文件保存到后端
    const projectIdValue = Number(projectId.value)
    
    // 需要传递的数据
    const requestData = {
      file_path: path,
      description: '' // 可选添加描述
    }
    
    // 调试日志
    console.log('Creating config file with data:', requestData)
    console.log('API path:', `/config-files/${projectIdValue}/files`)
    
    // 调用API
    const response = await createProjectConfigFile(projectIdValue, requestData)
    
    // 调试响应
    console.log('API response:', response)
    
    if (response.code === 0 && response.data) {
      // 获取新创建的配置文件对象（包含id等信息）
      const newConfigFile = response.data
      
      // 将新文件添加到配置文件列表
      configFiles.value.push(newConfigFile)
      
      // 更新文件路径列表
      filePaths.value.push(path)
      
      // 排序文件路径
      filePaths.value.sort()
      
      // 清空输入
      newFilePath.value = ''
      
      // 选中新创建的文件路径
      selectedFilePath.value = path
      
      // 刷新配置项列表，以显示该文件下的配置项（可能为空）
      handleFilePathChange(path)
      
      ElMessage.success('文件路径添加成功')
      
      // 关闭文件路径管理对话框
      filePathDialogVisible.value = false
    } else {
      // API调用失败
      ElMessage.error(response.errorMsg || '文件路径添加失败')
    }
  } catch (error) {
    console.error('Failed to add file path:', error)
    ElMessage.error('文件路径添加失败，请稍后重试')
  } finally {
    // 隐藏加载状态
    loading.value = false
  }
}

// 打开配置对话框
const openConfigDialog = (type: 'add' | 'edit' = 'add', config?: ProjectConfig) => {
  dialogTitle.value = type === 'add' ? '添加配置' : '编辑配置'
  
  if (type === 'edit' && config) {
    currentConfig.value = config
    // 设置表单值
    configForm.key = config.key || ''
    configForm.value = config.value || ''
    configForm.description = config.description || ''
    configForm.file_path = formatFilePath(config.file_path) // 格式化路径
  } else {
    currentConfig.value = null
    // 重置表单
    configForm.key = ''
    configForm.value = ''
    configForm.description = ''
    // 如果选中的是“全部”，则默认为空，否则使用选中的文件路径
    configForm.file_path = selectedFilePath.value === 'all' ? '' : (selectedFilePath.value || '')
  }
  
  configDialogVisible.value = true
}

// 重置配置表单
const resetConfigForm = () => {
  configForm.key = ''
  configForm.value = ''
  configForm.description = ''
  configForm.file_path = ''
}

// 保存配置
const saveConfig = useThrottle(async () => {
  if (!projectId.value) {
    ElMessage.error('无效的项目ID')
    return
  }

  try {
    loading.value = true
    
    const projectIdValue = Number(projectId.value)
    
    // 使用项目名称作为module_name参数
    // 根据后端要求，module_name应为项目名称而非项目类型
    let moduleName = project.value?.name || ''
    
    // 文件路径、配置项
    // Don't use default fallback for file paths
    let filePath = configForm.file_path
    if (currentConfig.value) {
      // 如果是编辑现有配置，使用已有的file_path
      filePath = currentConfig.value.file_path
    }
    
    // 如果没有选择文件路径，提示用户选择或创建文件
    if (!filePath) {
      ElMessage.info('请先选择或创建配置文件')
      configDialogVisible.value = false
      showFilePathDialog()
      return
    }
    
    // 确保文件路径中不包含错误的路径分隔符
    if (filePath.includes('/')) {
      // 去除路径中的其他部分，只保留文件名
      filePath = filePath.split('/').pop() || filePath
    }
    
    console.log(`Saving config: projectId=${projectIdValue}, moduleName=${moduleName}, filePath=${filePath}, key=${configForm.key}`)
    
    // 先检查该路径的配置文件是否已存在于config_files表中
    const existingFile = configFiles.value.find(file => file.file_path === filePath)
    
    // 如果文件路径不存在于config_files中，先创建它
    if (!existingFile) {
      console.log(`Creating config file for path: ${filePath}`)
      try {
        const createRes = await createProjectConfigFile(projectIdValue, {
          file_path: filePath,
          description: `配置文件 ${filePath}`
        })
        
        if (createRes.code === 0) {
          console.log('Config file created successfully:', createRes.data)
          // 添加到本地配置文件列表
          configFiles.value.push({
            id: createRes.data.id,
            file_path: filePath,
            project_id: projectIdValue,
            created_at: new Date().toISOString(),
            updated_at: new Date().toISOString()
          })
          
          // 更新文件路径列表
          if (!filePaths.value.includes(filePath)) {
            filePaths.value.push(filePath)
          }
        } else {
          console.error('Failed to create config file:', createRes.errorMsg)
          ElMessage.error(`创建配置文件失败: ${createRes.errorMsg || '未知错误'}`)
          return
        }
      } catch (error) {
        console.error('Error creating config file:', error)
        ElMessage.error('创建配置文件失败，请重试')
        return
      }
    }
    
    // 调用API保存配置项 - 使用新的API格式
    const res = await saveProjectConfig(projectIdValue, moduleName, filePath, configForm.key, {
      value: configForm.value,
      description: configForm.description || ''
    }, !!currentConfig.value) // 如果currentConfig有值表示是更新操作
    
    if (res.code === 0) {
      ElMessage.success('配置保存成功')
      // 更新列表数据
      if (currentConfig.value) {
        const index = configList.value.findIndex(item => item.id === currentConfig.value!.id)
        if (index > -1) {
          configList.value[index] = {
            ...currentConfig.value!,
            value: configForm.value,
            description: configForm.description || ''
          }
        }
      } else {
        configList.value.push({
          id: res.data.id,
          key: configForm.key,
          value: configForm.value,
          description: configForm.description || '',
          file_path: filePath,
          project_id: projectIdValue
        })
      }
      
      // 如果文件路径发生变化，重新提取文件路径并更新筛选
      extractFilePaths()
      handleFilePathChange()
      
      configDialogVisible.value = false
    } else {
      ElMessage.error(res.errorMsg || '配置保存失败')
    }
  } catch (error) {
    console.error('Failed to save config:', error)
    ElMessage.error('保存配置失败')
  } finally {
    loading.value = false
  }
})

// 确认删除
const confirmDelete = async () => {
  if (!currentConfig.value || !projectId.value) {
    ElMessage.error('无效的配置或项目ID')
    return
  }
  
  try {
    console.log('Current config to delete:', currentConfig.value)
    
    // 获取配置项的必要信息
    const projectIdValue = Number(projectId.value)
    const configKey = currentConfig.value.key
    
    // 使用项目名称作为module_name参数
    // 根据后端要求，module_name应为项目名称而非项目类型
    let moduleName = project.value?.name || ''
    
    // 文件路径、配置项
    // Don't use default fallback for file paths
    let filePath = currentConfig.value.file_path
    if (!filePath) {
      ElMessage.error('请选择或输入有效的文件路径')
      return
    }
    
    // 确保文件路径中不包含错误的路径分隔符
    if (filePath.includes('/')) {
      // 去除路径中的其他部分，只保留文件名
      filePath = filePath.split('/').pop() || filePath
    }
    
    console.log(`Deleting config: projectId=${projectIdValue}, moduleName=${moduleName}, filePath=${filePath}, key=${configKey}`)
    
    // 调用API删除配置项 - 使用新的API格式
    const res = await deleteProjectConfig(projectIdValue, moduleName, filePath, configKey)
    
    if (res.code === 0 && res.data && res.data.success) {
      // 删除成功，更新前端列表
      const index = configList.value.findIndex(item => item.id === currentConfig.value!.id)
      if (index !== -1) {
        configList.value.splice(index, 1)
      }
      // 更新过滤后的列表，确保UI立即刷新
      handleFilePathChange()
      ElMessage.success('配置已删除')
      deleteConfirmVisible.value = false
    } else {
      ElMessage.error(res.errorMsg || '删除配置失败')
    }
  } catch (error) {
    console.error('Failed to delete config:', error)
    ElMessage.error('删除配置失败')
  }
}

// 返回上一页
const goBack = () => {
  router.back()
}

// 初始化
onMounted(() => {
  loadProjectDetail()
})
</script>

<style scoped lang="scss">
.project-config-page {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .project-info {
    padding: 10px 0;
    border-bottom: 1px solid var(--el-border-color-lighter);
    
    .label {
      color: var(--el-text-color-secondary);
      margin-right: 5px;
    }
    
    .value {
      font-weight: 500;
    }
  }
  
  .loading-container {
    padding: 20px 0;
  }
  
  .empty-container {
    padding: 40px 0;
    text-align: center;
  }
  
  .config-table-container {
    .el-table {
      --el-table-border-color: #ebeef5;
      --el-table-header-bg-color: #f5f7fa;
    }
    
    .config-table-row {
      font-size: 14px;
    }
    
    .el-tag {
      margin: 0;
    }
  }
}
</style>
